<template>
  <div id="index">
    <div class="swiper">
      <swiper
        circular="true"
        autoplay="true"
        interval="3000"
        indicator-dots="true"
        indicator-color="white"
        indicator-active-color="black">
        <swiper-item>
          <img src="/static/store/management/store.jpg" alt="">
        </swiper-item>
        <swiper-item>
          <img src="/static/store/management/store.jpg" alt="">
        </swiper-item>
        <swiper-item>
          <img src="/static/store/management/store.jpg" alt="">
        </swiper-item>
      </swiper>
    </div>
    <div id="management">
      <div id="menu" style="margin-left: 2.4rem" @click="toMenuManagement()">
        <img src="/static/store/management/menu.png" alt="">
        <span>菜品管理</span>
      </div>
      <div id="desktop" @click="toTableManagement()">
        <img src="/static/store/management/desktop.png" alt="">
        <span>桌面管理</span>
      </div>
      <div id="store" style="margin-right: 0" @click="toorderManagement()">
        <img src="/static/store/management/orderManagement.png" >
        <span>订单管理</span>
      </div>
    </div>
    <div id="turnover">
      <div class="left">
        <div>
          <span>今日总营业额（元）</span>
          <span>{{totalPrice}}</span>
        </div>
        <div>
          <span>待结算订单金额（元）</span>
          <span>{{waitPrice}}</span>
        </div>
      </div>
      <div class="right">
        <div>
          <span>今日有效订单数（单）</span>
          <span>{{effectiveNumber}}</span>
        </div>
        <div>
          <span>待结算订单数（单）</span>
          <span>{{waiNumber}}</span>
        </div>
      </div>
    </div>
    <span class="more">更多订单统计</span>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        orderDetail: [],
        totalPrice: 0,
        waitPrice: '8000.00',
        effectiveNumber: 0,
        waiNumber: '10'
      }
    },
    methods: {
      toMenuManagement() {
        wx.navigateTo({
          url: '/pages/menuManagement/main'
        })
      },
      toorderManagement() {
        wx.navigateTo({
          url: '/pages/orderManagement/main'
        })
      },
      toTableManagement(){
        wx.navigateTo({
          url: '/pages/tableManagement/main'
        })
      }
    },
    mounted(){
      let data = {S_id:"s001"};
      this.$axios.get("getOrderBySid", data).then(res=>{
        this.orderDetail = res.data;
        this.effectiveNumber = this.orderDetail.length;
        for(let i=0;i<this.effectiveNumber;i++){
          this.totalPrice = this.orderDetail[i].price + this.totalPrice;
        }
      });
    }
  }
</script>

<style scoped>
  #index{
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: column;
  }
  .swiper{
    margin-top: 0.2rem;
    margin-left: auto;
    margin-right: auto;
    width: 94%;
    height: min-content;
  }
  .swiper swiper{
    height: 3.8rem;
  }
  .swiper swiper swiper-item img{
    width: 100%;
    height: 100%;
  }
  #management{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: min-content;
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    padding-bottom: 0.5rem;
    border-bottom: #c6c6c6 solid 1px;
  }
  #management div{
    width: max-content;
    height: min-content;
    display: flex;
    flex-direction: column;
    margin-right: 1.1rem;
  }
  #management div img{
    margin: 0 auto;
    width: 0.6rem;
    height: 0.6rem;
  }
  #management div span{
    margin-top: 0.1rem;
  }
  #turnover{
    margin-top: 0.2rem;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: min-content;
    padding-bottom: 0.5rem;
    border-bottom: #c6c6c6 solid 1px;
  }
  #turnover div{
    display: flex;
    flex-direction: column;
  }
  #turnover .left{
    width: 4rem;
    margin-left: 0.7rem;
    margin-right: 0.4rem;
  }
  #turnover .right{
    width: 4rem;
    margin-left: 0.7rem;
    margin-right: 0.4rem;
  }
  #turnover div div span:nth-child(1){
    margin-top: 0.2rem;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.25rem;
  }
  #turnover div div span:nth-child(2){
    margin-top: 0.1rem;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.5rem;
    color: orange;
  }
  .more{
    font-size: 0.3rem;
    margin-top: 0.3rem;
    margin-left: auto;
    margin-right: auto;
    color: #d99500;
  }
</style>
